<template>
  <div class="search_container">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-bottom: 8px">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item>借阅规则管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card shadow="always">
      <!-- 搜索内容和导出区域 -->
      <el-row style="margin-bottom: 8px">
        <el-col :span="4">
          <el-button type="primary" size="large" @click="showAddDialog()">
            <i class="el-icon-plus"></i>
            添加
          </el-button>
        </el-col>
        <el-col :span="2" style="float: right">
          <el-button type="primary" class="el-icon-printer" size="large" @click="exportToExcel">
            导出Excel
          </el-button>
        </el-col>
        <el-col :span="4"></el-col>
        <el-col :span="2" style="float: right">
          <!-- <el-button type="primary" class="el-icon-printer" size="large" @click="downLoad">
            导出PDF
          </el-button> -->
        </el-col>
        <el-col :span="4"></el-col>
        <el-col :span="2" style="float: right">
          <el-button type="success" class="el-icon-full-screen" size="large" @click="fullScreen">
            全屏
          </el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table
        :data="tableData"
        border
        height="320"
        style="width: 100%"
        stripe
        id="pdfDom"
        :default-sort="{ prop: 'bookLimitLibrary', order: 'ascending' }"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column prop="BookRuleID" label="规则ID" sortable></el-table-column>
        <el-table-column prop="BookDays" label="限制天数" sortable></el-table-column>
        <el-table-column prop="BookLimitNumber" label="限制本数" sortable></el-table-column>
        <el-table-column prop="BookLimitLibrary" label="限制图书馆"></el-table-column>
        <el-table-column prop="BookOverdueFee" label="逾期费用" sortable></el-table-column>
        <el-table-column label="操作">
          <template #default="{ row }">
            <!-- 修改按钮 -->
            <el-button type="primary" @click="showEditDialog(row.RuleID)">
              <el-icon><EditPen /></el-icon>
            </el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" @click="removeUserById(row.RuleID)">
              <el-icon><Delete /></el-icon>
            </el-button>
          </template>
          <!-- 修改按钮 -->
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[1, 2, 3, 4, 5]"
        :page-size="queryInfo.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 修改规则的对话框 -->
      <el-dialog title="修改规则" v-model="editDialogVisible" width="50%" @close="editDialogClosed">
        <el-form :model="eForm" ref="editFormRef" :rules="editFormRules" label-width="120px">
          <el-form-item label="规则ID" prop="bookLimitDays">
            <el-input v-model="eForm.BookRuleID"></el-input>
          </el-form-item>
          <el-form-item label="限制天数" prop="bookLimitDays">
            <el-input v-model="eForm.bookLimitDays"></el-input>
          </el-form-item>
          <el-form-item label="限制数量" prop="bookLimitNumber">
            <el-input v-model="eForm.bookLimitNumber"></el-input>
          </el-form-item>
          <!-- <el-form-item label="限制图书馆">
            <el-checkbox-group v-model="editForm.bookLimitLibrary">
              <el-checkbox label="南图"></el-checkbox>
              <el-checkbox label="北图"></el-checkbox>
              <el-checkbox label="教师之家"></el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->
          <el-form-item label="逾期每天费用" prop="bookOverdueFee">
            <el-input v-model="eForm.bookOverdueFee"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateRule">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 添加规则的对话框 -->
      <el-dialog title="添加规则" v-model="addDialogVisible" width="50%" @close="addDialogClosed">
        <el-form :model="aForm" ref="addFormRef" :rules="addFormRules" label-width="120px">
          <el-form-item label="规则ID" prop="BookRuleID">
            <el-input v-model="aForm.BookRuleID"></el-input>
          </el-form-item>
          <el-form-item label="限制天数" prop="bookLimitDays">
            <el-input v-model="aForm.bookLimitDays"></el-input>
          </el-form-item>
          <el-form-item label="限制数量" prop="bookLimitNumber">
            <el-input v-model="aForm.bookLimitNumber"></el-input>
          </el-form-item>
          <!-- <el-form-item label="限制图书馆">
            <el-checkbox-group v-model="addForm.bookLimitLibrary">
              <el-checkbox label="南图"></el-checkbox>
              <el-checkbox label="北图"></el-checkbox>
              <el-checkbox label="教师之家"></el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->
          <el-form-item label="逾期每天费用" prop="bookOverdueFee">
            <el-input v-model="aForm.bookOverdueFee"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRule">添加规则</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { getRulesList, addaRule, getOneRule, postOneRule, delOneRule } from "../../api/api";
import * as XLSX from "xlsx";

let tableData = ref();

const editDialogVisible = ref(false);

const eForm = reactive({
  RuleID: 0,
  BookRuleID: 0,
  bookLimitDays: "",
  bookLimitNumber: "",
  bookOverdueFee: 0,
});

const editForm = reactive({
  RuleID: 0,
  bookLimitDays: "",
  bookLimitNumber: "",
  bookLimitLibrary: "南图,北图,教师之家",
  bookOverdueFee: 0,
  bookRuleId: "",
});
const editFormRules = reactive({
  bookLimitDays: [{ required: true, message: "请输入限制天数", trigger: "blur" }],
  bookLimitNumber: [{ required: true, message: "请输入限制数量", trigger: "blur" }],
  bookOverdueFee: [
    {
      required: true,
      message: "请输入正确的逾期每天费用",
      trigger: "blur",
    },
  ],
});
const addDialogVisible = ref(false);
const aForm = reactive({
  BookRuleID: "",
  bookLimitDays: "",
  bookLimitNumber: "",
  bookOverdueFee: "",
});
const addForm = reactive({
  BookRuleID: 0,
  bookLimitDays: 0,
  bookLimitNumber: 0,
  bookLimitLibrary: "南图,北图,教师之家",
  bookOverdueFee: 0,
});
const addFormRules = reactive({
  BookRuleID: [{ required: true, message: "请输入规则id", trigger: "blur" }],
  bookLimitDays: [{ required: true, message: "请输入限制天数", trigger: "blur" }],
  bookLimitNumber: [{ required: true, message: "请输入限制数量", trigger: "blur" }],
  bookOverdueFee: [
    {
      required: true,
      message: "请输入正确的逾期每天费用",
      trigger: "blur",
    },
  ],
});
const queryInfo = reactive({
  pageNum: 1,
  pageSize: 5,
  query: "",
  condition: "",
});
const total = ref(0);
const title = "借阅规则";
const json_fields = {
  规则编号: "bookLimitLibrary",
  限制天数: "bookLimitDays",
  限制本数: "bookLimitNumber",
  限制图书馆: "bookLimitLibrary",
  逾期费用: "bookOverdueFee",
};
const loading = ref(true);

onMounted(() => {
  getRuleList();
});

//导出excel
const exportToExcel = () => {
  //excel表格头部
  const headers = ["借阅证ID", "限制天数", "限制本数", "限制图书馆", "逾期费用"];
  // 转换表格数据为数组
  const ExcleData = tableData.value.map(item => [
    item.RuleID,
    item.BookDays,
    item.BookLimitNumber,
    item.BookLimitLibrary,
    item.BookOverdueFee,
  ]);
  // 创建一个工作簿
  const workbook = XLSX.utils.book_new();
  // 创建一个工作表
  const worksheet = XLSX.utils.aoa_to_sheet([headers, ...ExcleData]);

  // 将工作表添加到工作簿
  XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
  // 生成Excel文件
  XLSX.writeFile(workbook, "图书查询表格.xls");
};

const handleSizeChange = val => {
  queryInfo.pageSize = val;
  getRuleList();
};
const handleCurrentChange = val => {
  queryInfo.pageNum = val;
  getRuleList();
};
//让修改公告的对话框可见
const showEditDialog = id => {
  editDialogVisible.value = true;
  getOneRule(id)
    .then(res => {
      (eForm.RuleID = id),
        (eForm.BookRuleID = res.data.BookRuleID),
        (eForm.bookLimitDays = res.data.BookDays),
        (eForm.bookLimitNumber = res.data.BookLimitNumber),
        (eForm.bookOverdueFee = res.data.BookOverdueFee),
        ElMessage({
          message: "获取信息成功",
          type: "success",
        });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("获取信息失败");
    });
};
//修改
const updateRule = () => {
  editForm.RuleID = eForm.RuleID;
  editForm.bookRuleId = Number(eForm.BookRuleID);
  editForm.bookLimitDays = Number(eForm.bookLimitDays);
  editForm.bookLimitNumber = Number(eForm.bookLimitNumber);
  editForm.bookOverdueFee = Number(eForm.bookOverdueFee);
  console.log(editForm);
  postOneRule(editForm)
    .then(res => {
      console.log(res.data, "111");
      ElMessage({
        message: "修改借阅证成功",
        type: "success",
      });
    })
    .then(res => getRuleList())
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("修改借阅证失败");
    });

  editDialogVisible.value = false;

  // editDialogVisible = false;
};

//监听修改对话框的关闭，一旦对话框关闭，就重置表单，回显数据
const editDialogClosed = () => {
  // $refs.editFormRef.resetFields();
  editForm.bookLimitLibrary = "南图,北图,教师之家";
};
//删除公告
const removeUserById = id => {
  delOneRule(id)
    .then(res => {
      console.log(res.data, "111");
      ElMessage({
        message: "删除规则成功",
        type: "success",
      });
    })
    .then(res => getRuleList())
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("删除规则失败");
    });
};
//监听添加公告对话框的关闭，一旦对话框关闭，就重置表单
const addDialogClosed = () => {
  // $refs.addFormRef.resetFields();
  // addForm.bookLimitLibrary = ["南图", "北图", "教师之家"];
};
//当用户点击发送新公告时，让添加对话框的visible改为true
const showAddDialog = () => {
  addDialogVisible.value = true;
};

const getRuleList = () => {
  getRulesList(queryInfo)
    .then(res => {
      tableData.value = res.data.records;
      total.value = parseInt(res.data.total);
      console.log(tableData.value, "111");
      ElMessage({
        message: "获取信息成功",
        type: "success",
      });
    })
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("获取信息失败");
    });
  loading.value = false;
};

const addRule = () => {
  addForm.BookRuleID = Number(aForm.BookRuleID);
  addForm.bookLimitDays = Number(aForm.bookLimitDays);
  addForm.bookLimitNumber = Number(aForm.bookLimitNumber);
  addForm.bookOverdueFee = Number(aForm.bookOverdueFee);
  addaRule(addForm)
    .then(res => {
      console.log(res.data, "111");
      ElMessage({
        message: "增加借阅证成功",
        type: "success",
      });
    })
    .then(res => getRuleList())
    .catch(err => {
      console.log(err, "err");
      ElMessage.error("增加借阅证失败");
    });
  addDialogVisible.value = false;
};

const downLoad = () => {
  getPdf(title);
};
const fullScreen = () => {
  // Dom对象的一个属性: 可以用来判断当前是否为全屏模式(trueORfalse)
  let full = document.fullscreenElement;
  // 切换为全屏模式
  if (!full) {
    // 文档根节点的方法requestFullscreen实现全屏模式
    document.documentElement.requestFullscreen();
  } else {
    // 退出全屏模式
    document.exitFullscreen();
  }
};
</script>

<style></style>
